<link rel="stylesheet" href="/public/css/admin.css">

<div class="admin-container">
  <div class="admin-header">
    <h1 class="admin-title">Product Management</h1>
    <div class="admin-navigation">
      <a href="/admin/users" class="admin-nav-link">Manage Users</a>
      <a href="/" class="admin-nav-link">Back to Home</a>
    </div>
  </div>

  <button class="add-new-button">Add New Product</button>

  <% if (products && products.length > 0) { %>
    <table class="admin-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <% products.forEach(product => { %>
          <tr id="admin_product_<%= product.id %>">
            <td><%= product.id %></td>
            <td>
              <img src="<%= product.image %>" alt="<%= product.name %>" class="product-image-small">
            </td>
            <td><%= product.name %></td>
            <td>$<%= product.price.toFixed(2) %></td>
            <td><%= product.quantity %></td>
            <td><%= product.description %></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  <% } else { %>
    <div class="no-data-message">No products found in the database.</div>
  <% } %>
</div>